<template>
	<div>
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<scroll @pullingDown="pullDownRefresh" @pullingUp="pullUpLoad" ref="person" style="margin-top:-1px">
			<div class="content">
				<div class="block-list shadow_primary">
	                <div class="block-item head self">
	                    <div class="head_img">
	                        <input id="filed" type="file"  accept="image/gif,image/jpeg,image/jpg,image/png" style="width: 100%;height: 100%;opacity: 0;position: absolute;z-index: 20" @change="upLoadHead($event)">
	                        <img style="height: 100%;width: 100%" id="headImg" :src="headImageUrl">
	                    </div>
	                    <div class="name-area ">头像</div>
	                </div>
	                <div class="block-itemd" on-tap="nickName_cancel()" >
	                    <div class="dischange note-area">{{person.name}}</div>
	                    <div class="name-area ">昵称</div>
	                </div>
	                <div class="block-item" on-tap="goWe()">
	                    <div class="note-area">
	                        <!-- <div class="select" on-tap="selectGender()">
	                            {{verify.isNull(person.sex)?"--":person.sex}}
	                        </div> -->
	                        <popup-picker :data="sexList" @on-change="onChange" :placeholder="sex" :popup-style="cpopup" confirm-text="确认"></popup-picker>
	                    </div>
	                    <div class="name-area ">性别</div>
	                </div>
	            </div>
	            <div class="block-list shadow_primary">
	                <div class="block-item self">
	                    <div class="dischange note-area" style="margin-right:0" >{{person.phone}}</div>
	                    <div class="name-area">手机号</div>
	                </div>

	                <div class="block-item">
	                    <!-- <div class="img-area we"></div> -->
	                    <div class="dischange note-area" @click="resetPwd()">修改</div>
	                    <!-- <div class="note-area active" v-if="0" on-tap="setPwd()">去设置</div> -->
	                    <div class="name-area ">密码</div>
	                </div>
	            </div>
	        </div>
        </scroll>
	</div>
</template>
<style lang="less" scoped>
	.content {
		position: relative;
		top: 44px;
		left: 0;
		& .block-list {
			text-align: left;
		    padding: 0 16px;
		    margin-top: 12px;
		    font-size: 12px;
		    color: #666;
		    background-color: #fff;
		    & .block-item {
		    	position: relative;
			    font-size: 14px;
			    height: 50px;
			    line-height: 50px;
			    margin-bottom: 0;
			    box-sizing: border-box;
				&:not(:last-child) {
				    border-bottom: 1px solid #eee;
				}
				& .head_img {
				    position: absolute;
				    right: 10px;
				    top: 13.33%;
				    width: 44px;
				    height: 44px;
				    border-radius: 50%;
				    overflow: hidden;
				}
				& .name-area {
				    margin-left: 0;
				    font-size: .37547rem;
				}
				& .note-area {
				    margin-right: 0.48213rem;
				    float: right;
				}
				&:after {
					content: "";
				    display: block;
				    right: 0;
				    top: 50%;
				    width: 6px;
				    height: 110px;
				    margin-top: -5px;
				    position: absolute;
				    background: url('../../assets/img/pers/arrow.png') no-repeat 0 0;
				    background-size: 100%;
				}
				&.self:after{
					display: none;
				}
				&.head{
					height: 60px;
					line-height: 60px;
				}
			}
			& .block-itemd {
			    position: relative;
			    font-size: 14px;
			    height: 50px;
			    line-height: 50px;
			    border-bottom: 1px solid #eee;
			    margin-bottom: 0;
			    & .note-area {
				    text-align: right;
				    float: right;
				}
			}
		}
		& .select {
		    float: right;
		    margin-right: 0px;
		    width: 40px;
		    text-align: right;
		    color: #999;
		}
		& .cpopup {
			height: 200px;
		}
	}

</style>
<script>
	import apiService from "@/api/homepage.js";
	import verify from "@/utils/verify.js";
	import { PopupPicker } from 'vux';
	import OSS from 'ali-oss';
	import Toast from '@/components/toast.js';
	export default {
		components: {
            PopupPicker
        },
        data() {
        	return {
	        	headers: {
	                title:'个人信息',
	                skip:'',
	            },
	            person: {},
	            headImageUrl: require('../../assets/img/pers/face.png'),
	            verify: verify,
	            sexList: [['男', '女']],
	            sex:"--",
	            cpopup: {
	            	height: "200px",
	            },
	            clientInfo: {}
	        }
        },
        methods: {
            back(){
                this.$router.go(-1)
            },
            onChange(val) {
            	this.genderChange(val);
            },
            genderChange: function(sex){
            	let params = {
            		"sex": sex[0]
            	}, _this = this;
            	apiService.genderOrpicChange(params).then(resp=>{
            		if (resp.code == 200) {
	                    _this.sex = sex[0];
	                }
            	})
            },
            getPicParameter: function() {
            	let _this = this;
            	apiService.getPicParameter('headImg').then(resp=>{
                    _this.clientInfo = {
                    	"accessKeyId": resp.accessKeyId,
                    	"accessKeySecret": resp.accessKeySecret,
                    	"stsToken": resp.securityToken,
                    	"region": 'oss-cn-hangzhou',
                    	"bucket": resp.bucket,
                    	"secure": true
                    }
            	})
            },
            upLoadHead: function(i) {
            	let _this = this;
    			var inputfile = i.target.files[0];
                var ext = inputfile.name.substring(inputfile.name.lastIndexOf("."));
                var uniqueId = function() {
                      return Math.random().toString(36).substring(2) +
                        Math.random().toString(36).substring(2) +
                        (new Date()).getTime().toString(36);
                }
                var d = new Date();
                var ymd = d.getFullYear()+""+d.getMonth()+d.getDate();
                var fileName = "headImg" + '/' + ymd + '/' + uniqueId() + ext.toLowerCase();
                var client = new OSS.Wrapper(_this.clientInfo);
                client.multipartUpload(fileName, i.target.files[0]).then(function (result) {
                        var imageUrl = result.res.requestUrls[0];
                        var info = {
                            "headImageUrl": fileName
                        }
                        apiService.genderOrpicChange(info).then(resp=>{
                            _this.headImageUrl = 'https://img.mibaostore.cn/'+info.headImageUrl;
                        })
                });
            },
            resetPwd: function(){
            	this.$router.push({path: '/resetPwd'})
            },
            pullDownRefresh() {
            	this.$refs.person.forceUpdate();
            	return;
            },
            pullUpLoad(){
            	this.$refs.person.forceUpdate();
            	return;
            }
        },
        mounted() {
        	let _this = this;
            apiService.getUserInfo2().then(resp=>{
             	if(resp.code == 200) {
	             	_this.person = resp.data;
	             	if(_this.person.headImageUrl) {
	             		_this.headImageUrl = 'https://img.mibaostore.cn/' + _this.person.headImageUrl
	             	}
	             	_this.sex = verify.isNull(_this.person.sex)?'--':_this.person.sex;
	             }
             })
            _this.getPicParameter();
        },


	}
</script>